<template>
  <div>
    <ul v-for="item in list">
      <li>姓名:{{ item.name }}</li>
      <li>年龄:{{ item.age }}</li>
    </ul>
  </div>

  <div>
    <table border="1">
      <tr bgcolor="cyan">
        <td>用户借款编号</td>
        <td>借款用户账号</td>
        <td>借款款项名称</td>
        <td>借款金额</td>
        <td>剩余还款本金</td>
      </tr>

      <tr v-for="item in loan">
        <td>{{ item.loanId }}</td>
        <td>{{ item.loanUser }}</td>
        <td>{{ item.loanName }}</td>
        <td>{{ item.loanMoney }}</td>
        <td>{{ item.loanBackMoney}}</td>
      </tr>
    </table>
  </div>

  <div>
    <h1>双向数据绑定演示</h1>
    <input type="text" v-model="str" >
    <p>{{str}}</p>
  </div>

  <div>
    <table>
      <tr>
        <td>ID编号</td>
        <td>名称</td>
        <td>页数</td>
        <td>操作列</td>
      </tr>

      <tr v-for="item in books" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.pageCount }}</td>
        <td><input type="button" value="删除" @click="DelInfo(item.id)"></td>         
      </tr>
    </table>

    <div>
      <p v-for="item in book">{{ item.id }} -- {{ item.name }} -- {{ item.pageCount }} </p>
      <input type="button" value="删除" @click="DelData()">
    </div>
  </div>

</template>

<script setup lang="ts">

import { log } from 'console';
import {reactive,toRefs,ref} from 'vue'

let data = reactive({
  list:[
    {name:'张大',age:21},
    {name:'李尔',age:20},
    {name:'刘珊',age:22},
    {name:'钱嗣',age:25},
    {name:'赵武',age:24}
  ],
  loan:[
    {
      loanId:'1',
      loanUser:'zhangsan',
      loanName:'八维助学金',
      loanMoney:'400',
      loanBackMoney:'0'},
    {
      loanId:'2',
      loanUser:'zhangsan',
      loanName:'八维助学金',
      loanMoney:'10000',
      loanBackMoney:'10000'
    }
  ],
  str:'Hello World'
})

let  books = ref([
  {id:1,name:'foreword', pageCount: 14},
  {id:2,name:'boyWhoLived', pageCount: 18},
  {id:3,name:'vanishingGlass', pageCount: 13},
  {id:4,name:'lettersFromNoOne', pageCount: 17},
  {id:5,name:'afterword', pageCount: 19},
]);

let  book = ref([
  {id:1,name:'foreword', pageCount: 14},
  {id:2,name:'boyWhoLived', pageCount: 18},
  {id:3,name:'vanishingGlass', pageCount: 13},
  {id:4,name:'lettersFromNoOne', pageCount: 17},
  {id:5,name:'afterword', pageCount: 19}
]);

let {list,loan,str} = toRefs(data)


//删除book
function DelInfo(id:number){
  books.value.splice(id,1)
  //books.value=[]
}

//删除book
function DelData(){
  book.value=[]
}

</script>

<style scoped>

ul{
  list-style: none;
}

div{
  margin-top: 30px;
}

</style>